<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="类型" prop="contentName" class="w-250" >
                <el-select v-model="queryParams.style" @change="handleQuery">
                    <el-option v-for="dict in styleList" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="标签状态" prop="labelStatus" class="w-250">
				<el-select v-model="queryParams.labelStatus" placeholder="请输入打印状态" clearable @change="handleQuery">
					<el-option v-for="dict in labelStatusList" :key="dict.value" :label="dict.label"
						:value="dict.value"></el-option>
				</el-select>
			</el-form-item> -->

            <!-- <el-form-item label="名称" prop="printName" class="w-250">
                <el-input v-model="queryParams.printName" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
            </el-form-item> -->
            <!-- <el-form-item label="时间" prop="time">
                <el-date-picker v-model="queryParams.time" value-format="x" type="datetimerange" :shortcuts="shortcuts"
                    range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery" />
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" size="small" icon="Download" @click="handleExport"
                    v-hasPermi="['manage:statistics:export']">导出</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table border v-loading="loading" :data="statisticsList" @row-click="(row) => (console.log(row))">
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column label="数据名称" align="center" prop="name" />
            <el-table-column label="打印机名称" align="center" prop="printer_name" />
            <el-table-column label="今日打印数" align="center" prop="jrdys" sortable />
            <el-table-column label="昨日打印数" align="center" prop="zrdys" sortable />
            <el-table-column label="本周打印数" align="center" prop="bzdys" sortable />
            <el-table-column label="本年打印数" align="center" prop="bndys" sortable />
            <el-table-column label="总打印数" align="center" prop="zdys" sortable />
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script setup name="Statistics" lang="ts">
import { listStatistics } from '@/api/manage/history';
import { getCurrentInstance, ref } from 'vue';

const { proxy } = getCurrentInstance() as any;

const statisticsList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryRef = ref();

const form = ref<any>({});
const queryParams = ref({
	pageNum: 1,
	pageSize: 10,
	style: '1',
	printName:'',
	labelStatus:'',
	time: ''
});
const shortcuts = [
	{
		text: '最近一周',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: '最近一个月',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: '最近三个月',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];
const styleList = [{ label: '门店', value: '1' }, { label: '产品', value: '2' }];
const labelStatusList = [{ label: '全部', value: '' }, { label: '保鲜中', value: '1' }, { label: '即将过期', value: '2' }, { label: '已过期', value: '3' }, { label: '已用完', value: '4' }, { label: '报损', value: '5' }];
/** 查询打印记录列表 */
function getList() {
	loading.value = true;
	let query = {};
	if (queryParams.value.time) {
		query = { ...queryParams.value, printTimeBegin: queryParams.value.time[0], printTimeEnd: queryParams.value.time[1] };
	} else {
		query = queryParams.value;
	}
	listStatistics(query).then((response: any) => {
		statisticsList.value = response.data.list;
		total.value = response.data.total;
		loading.value = false;
	});
}


/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1;
	getList();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm(queryRef);
	handleQuery();
}


/** 导出按钮操作 */
function handleExport() {
	proxy.download('manage/history/exportByStream', {
		...queryParams.value
	}, `history_${new Date().getTime()}.xlsx`);
}

getList();
</script>
